<span class="apes-input-wrapper apes-input-group" *ngIf="isAddOn">
  <span class="apes-input-group-addon" *ngIf="apesAddOnBefore || apesAddOnBeforeIcon">
    <i apes-icon [apesType]="apesAddOnBeforeIcon" *ngIf="apesAddOnBeforeIcon"></i>
    <ng-container *apesStringTemplateOutlet="apesAddOnBefore">{{ apesAddOnBefore }}</ng-container>
  </span>
  <ng-container *ngIf="!isAffix">
    <ng-template *ngTemplateOutlet="contentTemplate"></ng-template>
  </ng-container>
  <span class="apes-input-affix-wrapper" [class.apes-input-affix-wrapper-sm]="isSmall" [class.apes-input-affix-wrapper-lg]="isLarge" *ngIf="isAffix">
    <ng-template *ngTemplateOutlet="affixTemplate"></ng-template>
  </span>
  <span class="apes-input-group-addon" *ngIf="apesAddOnAfter || apesAddOnAfterIcon">
    <i apes-icon [apesType]="apesAddOnAfterIcon" *ngIf="apesAddOnAfterIcon"></i>
    <ng-container *apesStringTemplateOutlet="apesAddOnAfter">{{ apesAddOnAfter }}</ng-container>
  </span>
</span>
<ng-container *ngIf="isAffix && !isAddOn">
  <ng-template *ngTemplateOutlet="affixTemplate"></ng-template>
</ng-container>
<ng-template #affixTemplate>
  <span class="apes-input-prefix" *ngIf="apesPrefix || apesPrefixIcon">
    <!-- TODO: should have a class to set its color, cc: antd-->
    <i apes-icon [apesType]="apesPrefixIcon" *ngIf="apesPrefixIcon" style="color: rgba(0, 0, 0, 0.25)"></i>
    <ng-container *apesStringTemplateOutlet="apesPrefix">{{ apesPrefix }}</ng-container>
  </span>
  <ng-template *ngTemplateOutlet="contentTemplate"></ng-template>
  <span class="apes-input-suffix" *ngIf="apesSuffix || apesSuffixIcon">
    <i apes-icon [apesType]="apesSuffixIcon" *ngIf="apesSuffixIcon"></i>
    <ng-container *apesStringTemplateOutlet="apesSuffix">{{ apesSuffix }}</ng-container>
  </span>
</ng-template>
<ng-container *ngIf="isGroup">
  <ng-template *ngTemplateOutlet="contentTemplate"></ng-template>
</ng-container>
<ng-template #contentTemplate>
  <ng-content></ng-content>
</ng-template>
